<!-- @format -->

<template>
  <div class="comp-tab" :style="{ width: fitContent ? 'fit-content' : '' }">
    <div class="tab-nav">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        class="tab-item"
        :style="navStyle"
        :class="{
          active: theActiveData === tab.value,
          'fontsize-30': diyFontSize == 'fontsize-30',
          'fontsize-20': diyFontSize == 'fontsize-20',
          'fontsize-16': diyFontSize == 'fontsize-16',
        }"
        @click="handleTabClick(tab.value)"
      >
        {{ tab.label }}
        <div class="tab-line" v-if="theActiveData === tab.value"></div>
      </div>
    </div>
    <div class="tab-content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue';

  interface TabItem {
    label: string;
    value: any;
  }

  const props = withDefaults(
    defineProps<{
      tabs: TabItem[];
      modelValue?: any;
      diyFontSize?: string;
      fitContent?: boolean;
      navStyle?: any;
    }>(),
    {
      modelValue: '', // 设置默认值为空字符串
      diyFontSize: 'fontsize-30', // 设置默认字体大小为 '16px'
      fitContent: false, // 设置默认值为 false
      navStyle: {},
    },
  );

  const emit = defineEmits<{
    'update:modelValue': [value: any];
    change: [value: string];
    diyFontSize: [value: string];
  }>();

  const theActiveData: any = ref(props.modelValue ?? '');
  watch(
    () => props.modelValue,
    (newVal) => {
      if (newVal !== undefined && newVal !== theActiveData.value) {
        theActiveData.value = newVal;
      }
    },
  );

  const handleTabClick = (value: string) => {
    theActiveData.value = value;
    emit('update:modelValue', value);
    emit('change', value);
  };
</script>

<style lang="scss" scoped>
  .comp-tab {
    width: 100%;
    // padding: 0 20px  !important;
    @media screen and (min-width: 769px) and (max-width: 1400px) {
      padding: 0 20px !important;
    }
    @media screen and (max-width: 768px) {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch; /* 增强iOS滚动体验 */
      scrollbar-width: none; /* Firefox */
      &::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
      }
    }
    .tab-nav {
      display: flex;
      @media screen and (max-width: 768px) {
        height: auto;
        width: fit-content;
        padding: 0 12px;
        margin-top: 16px;
        margin-bottom: 4px;
        white-space: nowrap;
        overflow-x: visible;
      }

      .tab-item {
        position: relative;
        // padding: 0 20px;
        margin-right: 20px;
        height: 40px;
        line-height: 40px;
        color: #303133;
        cursor: pointer;
        transition: color 0.3s;
        color: #000000;
        cursor: pointer;
        @media screen and (max-width: 768px) {
          display: inline-block;
          width: fit-content;
          text-align: center;
          line-height: 1.5;
          height: auto;
          min-height: 20px;
          padding: 0 4px;
          white-space: nowrap;
        }
        &.active {
          // color: $main;
          .tab-line {
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: $main;
            animation: tabLineIn 0.3s ease-in;
          }
        }

        &:hover {
          color: $main;
        }
      }
    }
  }

  @keyframes tabLineIn {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }

  .fontsize-30 {
    font-size: 30px !important;
    @media screen and (max-width: 768px) {
      font-size: 16px !important;
    }
  }
  .fontsize-20 {
    font-size: 20px !important;
    @media screen and (max-width: 768px) {
      font-size: 16px !important;
    }
  }
  .fontsize-16 {
    font-size: 16px !important;
    @media screen and (max-width: 768px) {
      font-size: 16px !important;
    }
  }
</style>
